page {
    background-color: #f5f5f5;
    height: 100%;
}



.top_style {
    color: #775148;
    line-height: 56rpx;
    padding-left: 48rpx;
    font-size: 24rpx;
    background: #ffE3d4;
    .icon {
    width: 14rpx;
    height: 28rpx;
    float: right;
    margin-top:10rpx;
    margin-right: 24rpx;
   }
}

.nocoup_style {
   background: white;
   position: fixed;
   top: 0px;
   left:0px;
   width: 100%;
   height: 100%;
   z-index: 999;
   image {
            width: 340rpx;
            height: 340rpx;
            display: block;
            margin: 180rpx auto 0rpx;
        }
        div {
            margin-top:80rpx;
            display: block;
            font-size: 24rpx;
            text-align: center;
            color: #787170;
        }
}

ul {
    width: 750rpx;
    li {

        position: relative;
        display: block;
        width: 702rpx;
        background: white;
        margin-left: 24rpx;
        margin-top: 24rpx;
        border-radius: 10rpx;
        .left-style {
            width: 222rpx;
            display: inline-block;
            float: left;
            label {
                color: #ff2f31;
                font-size: 30rpx;
                margin-top: 28rpx;
                display: block;
                text-align: center;
                p {
                    font-size: 50rpx;
                }
            }
            span {
                color: #787170;
                font-size: 24rpx;
                margin-top: 32rpx;
                display: block;
                text-align: center;
            }
        }
        .right-style {
            width: 480rpx;
            display: inline-block;
            position: relative;
            image {
                position: absolute;
                height: 88rpx;
                width: 160rpx;
                top: 40rpx;
                right: 24rpx;
            }
            label {
                width: 296rpx;
                margin-top: 38rpx;
                color: #231815;
                font-size: 30rpx;
                display: block;
                padding-left: 18rpx;
            }
            .time_style {
                margin-top: 42rpx;
                display: block;
                color: #787170;
                font-size: 18rpx;
                position: relative;
                padding-left: 18rpx;
            }
            .roules_style {
                width: 440rpx;
                margin-top: 18rpx;
                display: block;
                color: #787170;
                font-size: 18rpx;
                position: relative;
                padding-left: 18rpx;
                padding-right: 24rpx;
            }
            i {
                position: absolute;
                top: 10rpx;
                left: 0rpx;
                display: inline-block;
                width: 6rpx;
                height: 6rpx;
                background: #787170;
                transform: rotate(45deg);
            }
             .nomalRoule {}
            .longRoule {
                // display: block;
                line-height: 28rpx; //height: 56rpx;
                // width: 440rpx;
                // overflow: hidden;
                // text-overflow: ellipsis;
            }
            .shortRoule {
                display: block;
                line-height: 28rpx;
                width: 440rpx;
                height: 56rpx;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .moreInfo {
                clear: both;
                display: block;
                font-size: 20rpx;
                color: #bbb;
                margin-top: 26rpx;
                position: relative;
                image {
                    position: absolute;
                    // margin-top: 45rpx;
                    left: 50rpx;
                    top: 10rpx;
                    width: 18rpx;
                    height: 10rpx;
                    
                }
                .down_style{
                transform: rotate(0deg); 
                }
                .up_style{
                transform: rotate(180deg); 
                }
            }
        }
        .bottom-style {
            border-radius: 10rpx;
            line-height: 70rpx;
            font-size: 18rpx;
            padding-left: 24rpx;
            border-top: 2rpx dashed #f5f5f5;
        }
        .nomal_style {
            background: #e4f5a2;
            color: #4e8351;
        }
        .unomal_style {
            background: #fffcd4;
            color: #bfbd12;
        }
        .semicircle_l {
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            border-radius: 10rpx;
            background: #f5f5f5;
            display: inline-block;
            bottom: 60rpx;
            left: -10rpx;
        }
        .semicircle_r {
            position: absolute;
            width: 20rpx;
            height: 20rpx;
            border-radius: 10rpx;
            background: #f5f5f5;
            display: inline-block;
            bottom: 60rpx;
            right: -10rpx;
        }
    }
}